import React from 'react'
import { Form, Input,  Button,Avatar,Cascader,message } from 'antd'
import options from './city.js'
import service from '../../../service/index.js'
import {getLoginToken} from '../../../common/Auth.js'
import {LoadUserOneActionAsync} from '../../../redux/action/userAction'
import {connect} from 'react-redux'
function Basic_Set(props) {
  const [userOne,setUserOne] = React.useState({})
  const [userAvatar,setUserAvatar] = React.useState('')
  const [userLocation,setUserLocation] = React.useState(null)
  const [userOneForm]=Form.useForm()
  const loadUser = ()=>{
      userOneForm.setFieldsValue(props.userOne)
      setUserOne(props.userOne)
      setUserAvatar(props.userOne.avatar)
  }
  React.useEffect(()=>{
    props.LoadUserOneActionAsync({key:getLoginToken()})
  },[])
  React.useEffect(()=>{
    loadUser()
  },[props.userOne])
  function onChange(value,selectedOptions) {
  let userLocations = []
  selectedOptions.map((item)=>{
    userLocations.push(item.label)
  })
  setUserLocation(userLocations)
  }
  const changeFile = (e)=>{
    let file = e.target.files[0]
    let formFile = new FormData()
    formFile.append("file", file)
    service.upload(formFile).then((res)=>{
      setUserAvatar(res.data.img)
    })
  }
  const submit = async ()=>{
    try{
      const fieldsValue = await userOneForm.validateFields()
      fieldsValue.avatar=userAvatar
      fieldsValue.key = getLoginToken()
      if(userLocation){
        fieldsValue.locationName = userLocation
      }
      service.updateUser({...userOne,...fieldsValue})
      props.LoadUserOneActionAsync({key:getLoginToken()})
      message.success('提交成功!')
    }
    catch{
      message.error('提交失败!')
    }
  }
  return (
    <div style={{position:'relative'}}>
      <label htmlFor="file">
        <Avatar alt='' style={{float:'right',marginRight:'90px'}} src={userAvatar} size={80}></Avatar>
        <Button style={{zIndex:'2',position:'absolute',right:'64px',bottom:'285px'}} type='text'>点击头像更换</Button>
      </label>
      <input type="file" name="file" id='file' onChange={(e)=>{changeFile(e)}} accept="image/*" hidden={true}/>
      <Form name='personal_message' layout='vertical' labelWrap={true} form={userOneForm}
      >
        <Form.Item
        name='email'
        label="邮箱"
        rules={[
              {
                type:'email',
                message:'邮箱格式有误'
              },
              { 
                required: true,
                message: '请输入邮箱格式!' 
              }
        ]}
        >
        <Input maxLength={30} style={{width:'300px'}} allowClear={true}/>
        </Form.Item>
        <Form.Item
        name='name'
        label="昵称"
        rules={[
              {
                pattern:/^.+$/,
                message: '请输入字符!',
              },
              {
                required: true,
                message: '请输入昵称!',
              },
            ]}
        >
        <Input maxLength={30} style={{width:'300px'}} allowClear={true}/>
        </Form.Item>
        <Form.Item
          name="location"
          label="所在省市"
        >
          <Cascader
            fieldNames={{ label: 'label', value: 'value', children: 'children' }}
            options={options}
            onChange={onChange}
            placeholder="请选择"
            placement='bottomLeft'
            style={{width:'300px'}}
          />
        </Form.Item>
        <Form.Item
        name="individualResume"
        label="个人简介"
        >
        <Input.TextArea maxLength={100} style={{width:'500px',height:'80px'}} allowClear={true}/>
        </Form.Item>
      </Form>
      <Button type='primary' style={{width:'150px'}} onClick={submit}>提交</Button>
    </div>
  )
}
//使用connect()()创建并暴露一个Count的容器组件
export default connect(
	state => ({
    userOne:state.userOne
	}),
	{LoadUserOneActionAsync}
)(Basic_Set)
